import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import cls from 'classnames';

export default (props) => {
  const {
    value = '',
    onChange = () => {},
    label = '',
    type = 'text',
    suffix = null,
    noremember = false,
    blurFn = () => {},
    focusFn = () => {},
  } = props;

  const [isFocus, setIsFocus] = useState(false);

  const inputProps = {};
  if (noremember) inputProps.autoComplete = 'new-password';
  return (
    <div className={styles.text_field}>
      <div
        className={cls({
          [styles.text_field_input]: true,
          [styles.is_focus]: isFocus,
        })}
      >
        <input
          value={value}
          onChange={(e) => onChange(e.target.value)}
          type={type}
          className={styles.input}
          onFocus={() => {
            focusFn();
            setIsFocus(true);
          }}
          onBlur={() => {
            blurFn();
            setIsFocus(false);
          }}
          {...inputProps}
        />
        <div
          className={cls({
            [styles.label]: true,
            [styles.label_top]: isFocus || !!value,
          })}
        >
          {label}
        </div>
        {suffix}
      </div>
    </div>
  );
};
